3.7 How to pop up an element?

    Test for overlapping
    Click me!


    Test for overlapping. Click me!

    Another example: menu for TruQA
      • Sign In
      • Join
      • Forgot Password
    Try 'Sign In' in the above menu. You will write the code for modal windows, such as 'Sign In window' in the above exampe, later.

  1. How to overlap elements?
    • You need to use the 'position' CSS property with 'top', 'bottom', 'left', and 'right'. You may revisit 3.1 and 3.6.
    • But how can you display which elements over which elements?
      • Read all in CSS z-index Property.
        • Do you remember the first note in the above link? It is very important.
        • How to change z-index using JavaScript?

          • Test for overlapping
          Click me!


          Test for overlapping. Click me!

        • Trial 1: Let's try to change z-index valuses in the above example of two boxes. Their ids are '1st-box' and '2nd-box'.


    • Can you use z-index for non-positioned elements?
      No
  2. How to display a popup box? Any good idea to hide and show an element?
    • Example of a modal window -
    • Hide and show: initially 'display: none', and at the time to show an element 'display: block'.
    • How to display the popup box on the top of all the other elements?
      The 'z-index' CSS property.
    • Here is an example to display a 'SignIn' box within an outer box. When the button is clicked, the 'SignIn' box is displayed at the horizontal center. 
      <style>
    #signin-box {
        ????;  /* initially hidden */
        width: 300px; height: 100px; border: 1px solid Blue; background-color: SkyBlue; 
        position: ???; top: 100px; left: calc(50% - 200px); 
        z-index: 9999;
    }
</style>
    
<div style='border:1px solid black; width:500px; height:400px; position:???'>
    <div id='signin-box'>
        <h2 style='text-align:center'>TRU Q&A</h2>
    </div>

    <button id='menu-signin'>Sign In</button>
</div>
    
<script>
    document.???('menu-signin').???(???, show_signin_box);  // For mouse click
    ??? show_signin_box() {
        ????('signin-box').???? = ???;  // need to show
    }
    /*
    ??? hide_signin_box() {
        ????  // need to hide
    }
    */
</script>
    • Trial 2: Let's try to complete the above code.



  3. Learning outcomes
    • How to overlap elements.
    • How to hide and show elements.